<template>



	<!-- <view class="xflex-x select">
		<view class="select_box" :class="order.type ==1?'active':''" @click="onActive(1)">订单列表1</view>
		<view class="select_box" :class="order.type ==2?'active':''" @click="onActive(2)">订单列表2</view>
		<view class="select_box" :class="order.type ==3?'active':''" @click="onActive(3)">订单列表3</view>
	</view> -->

	<view class="xbgf xmt24" v-for="(item,index) in order.list" :key="index">
		<view class="goods xflex-x">
			<image class="goods_select" @click.stop="getCartSelected(item.id,item.selected,index)" v-if="item.selected == 0"
				src="/static/image/weigouxuan.png" mode=""></image>
			<image class="goods_select" @click.stop="getCartSelected(item.id,item.selected,index)" v-if="item.selected == 1"
				src="/static/image/gouxuan.png" mode=""></image>
			<view class="xflex-x xflex1">
				<image class="goods_img" :src="item.goods.image" mode=""></image>
				<view class="goods_info xflex-y-between xai xflex1">
					<view class="">
						<view class="xflex-x-between xfz28 xfw500 xc0">
							<view class="" v-if="nameShow == 1">{{item.goods.classification_name}}</view>
							<image class="goods_del" src="/static/image/del.png" @click="getcartDel(item.id)" mode="">
							</image>
						</view>
						<view class="xfz24 xfw500 xc9">编号：{{item.goods.sn}}</view>
					</view>
					<view class="xflex-x" v-if="priceShow">
						<view class="xflex1 xfz26 xfw500 xc3" >
							商品价格：
							<text class="xfz28 xfw500 color1">￥ {{item.goods.goods_price}}</text>
						</view>
						
						<view class="xflex-x" @click="order.list[index].show = !item.show">
							<view class="xfz24 xfw400 xc9">收起数量</view>
							<image class="goods_jt" src="/static/image/zhankai.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="item.show">
			<view class="xflex-x-between goods_set xbs">
				<view class="">总数量</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode=""
						@click="getcartChange(item.id,item.goods_num-1,index)">
					</image>
					<view class="goods_num">{{item.goods_num}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode=""
						@click="getcartChange(item.id,item.goods_num+1,index)"></image>
				</view>
			</view>
			<view class="xflex-x-between goods_set xbs">
				<view class="">A面</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode="" @click="getcartFace(item,'1',0,index)">
					</image>
					<view class="goods_num">{{item.value_1}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode="" @click="getcartFace(item,'1',1,index)">
					</image>
				</view>
			</view>
			<view class="xflex-x-between goods_set xbs">
				<view class="">B面</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode="" @click="getcartFace(item,'2',0,index)">
					</image>
					<view class="goods_num">{{item.value_2}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode="" @click="getcartFace(item,'2',1,index)">
					</image>
				</view>
			</view>
			<view class="xflex-x-between goods_set xbs">
				<view class="">C面</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode="" @click="getcartFace(item,'3',0,index)">
					</image>
					<view class="goods_num">{{item.value_3}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode="" @click="getcartFace(item,'3',1,index)">
					</image>
				</view>
			</view>
			<view class="xflex-x-between goods_set xbs">
				<view class="">D面</view>
				<view class="xflex-x">
					<image class="goods_js" src="/static/image/jian.png" mode="" @click="getcartFace(item,'4',0,index)">
					</image>
					<view class="goods_num">{{item.value_4}}</view>
					<image class="goods_js" src="/static/image/jia.png" mode="" @click="getcartFace(item,'4',1,index)">
					</image>
				</view>
			</view>
		</view>

	</view>
	<view class="" style="height: 300rpx;">

	</view>
	<view class="xbottom xflex-x-between">
		<view class="xflex-y">
			<view class="icon_text">
				已选产品:<text style="color: #DC1C1C;">{{sum}}</text>
			</view>
		</view>
		<view class="xflex-x">
			<view class="iBten" @click="orderLis()" v-if="orderShow == 1">
				生成订单
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue';
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		getGoodsDetail,
		cartLists,
		cartAdd,
		cartChange,
		cartFace,
		cartDel,
		getPriceShow,
		accesslists,
		cartSelected,
		orderadd
	} from '@/network/home.js';

	import {
		topage
	} from '/utils/common.js'
	let swiperData = reactive({
		list: [],
		current: 0,
		currentNum: 0,
		type:1
	});
	
	// 价格是否显示
	let priceShow = ref(false)
	let orderShow = ref(0)
	let nameShow = ref(0)
	// getPriceShow().then(res=>{
	// 	// console.log(res.data ==1,"====");
	// 	priceShow.value = res.data == 1
	// })
	// 修改选中状态
	const getCartSelected = (id, selected,index) => {
		cartSelected({
			cart_id: id,
			selected: selected == 1?0:1,
			type: 0
		}).then(res => {
			order.list[index].selected = selected == 1?0:1
		})
	}
	
	const orderLis = () =>{
		orderadd({
			type:swiperData.type
		}).then(res=>{
			topage('/pages/mine/order/good?type='+swiperData.type)
		})
	}
	
	accesslists().then(res=>{
		priceShow.value = res.data.goodsinfo_price == 1
		
		orderShow.value =  res.data.goodsinfo_create_order 
		nameShow.value = res.data.goodsinfo_classification
		
	})
	

	let current = ref(0);
	let list1 = ref([{
			name: '其他详情'
		},
		{
			name: '包装方案'
		},
		{
			name: '其他方案'
		},
		{
			name: '安装方案'
		}
	]);
	const click = (e) => {
		if (e.index == current.value) return;
		current.value = e.index;
		if (current.value == 0) {
			content.value = goods.info.goods_remark;
		} else if (current.value == 1) {
			content.value = goods.info.package_scheme;
		} else if (current.value == 2) {
			content.value = goods.info.shipping_scheme;
		} else if (current.value == 3) {
			content.value = goods.info.install_scheme;
		}
	};

	let content = ref("");

	let goods = reactive({
		id: '9607',
		info: {}
	})
	const goodsDetail = () => {
		getGoodsDetail({
			id: goods.id,
			method:'mnp'
		}).then((res) => {
			console.log(res);
			swiperData.list = res.data.other_images;
			content.value = res.data.goods_remark
			goods.info = res.data;
		});
	};


	// 订单
	const order = reactive({
		list: [],
		page: 1,
		type: swiperData.type
	})
	const getCart = () => {
		console.log("111111");
		cartLists({
			page_no: order.page,
			page_size: 10,
			type: swiperData.type,
			settle:1,
			method:'mnp'
		}).then(res => {
			console.log(res);
			
			order.list = res.data.lists
		})
	}

	let sum = ref(0)
	watch(() => order.list, (newValue, oldValue) => {
		console.log('watch 已触发', newValue)
		sum.value = 0
		newValue.forEach(item => {
			if (item.selected == 1) {
				sum.value++
			}
		})
	}, {
		deep: true
	})


	const onActive = (e) => {
		order.type = e
		// console.log();
		getCart()
	}

	const getCartAdd = (type) => {
		cartAdd({
			goods_id: goods.id,
			goods_num: 1,
			type: type
		}).then(res => {
			uni.showToast({
				title: "添加成功"
			})

		})
	}

	// 添加
	const getcartChange = (id, num, k) => {
		if (num == 0) return
		order.list[k].goods_num = num
		let data = {
			cart_id: id,
			goods_num: num
		}
		cartChange(data).then(res => {
			uni.showToast({
				title: "添加成功"
			})

		})
	}
	let addTYpe = ref(false)
	// @click="getcartFace(item,'1',0,index)"
	const getcartFace = (item, name, type, k) => {
		console.log(item, name, type, k);
		console.log(order.list[k][`value_${name}`]);
		let num = order.list[k][`value_${name}`]
		let id = order.list[k].id
		let a = 0
		if (type == 1) {
			a = num + 1
		} else {
			a = num - 1
		}

		if (a < 0) return
		if (addTYpe.value) return

		addTYpe.value = true
		order.list[k][`value_${name}`] = a
		cartFace({
			cart_id: id,
			goods_num: a,
			type: name
		}).then(res => {
			addTYpe.value = false
			// uni.showToast({
			// 	title: "添加成功"
			// })
			// getCart()
		})
	}




	// 删除
	const getcartDel = (id) => {
		cartDel({
			cart_id: id
		}).then(res => {
			getCart()
		})
	}

	// 修改订单数量
	const getcareAdd = (id, num) => {
		cartAdd({
			cart_id: id,
			goods_num: num
		}).then(res => {
			uni.showToast({
				title: "",
				icon: 'success'
			})

		})
	}


	onLoad((option) => {
		// goods.id = option.id;
		
	console.log(option);
		swiperData.type = option.type
		getCart()
	});
</script>

<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}

	.specification {
		width: 100%;
		text-align: start;

		&_lab {
			width: 110rpx;
		}

		&_val {
			flex: 1;
		}
	}

	.color1 {
		color: #f64d24;
	}

	.content {
		padding: 27rpx 66rpx 23rpx 36rpx;
		
	}

	.select {
		padding: 54rpx 30rpx 13rpx;

		&_box {
			width: 180rpx;
			height: 72rpx;
			background: #cccccc;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: 72rpx;
			text-align: center;
			margin-right: 20rpx;
		}

		.active {
			background: #3f7233;
		}
	}

	.goods {
		padding: 20rpx 21rpx 10rpx 15rpx;

		&_select {
			width: 32rpx;
			height: 32rpx;
			margin-right: 19rpx;
		}

		&_img {
			width: 103rpx;
			height: 180rpx;
			background-color: #3f7233;
			margin-right: 21rpx;
		}

		&_del {
			width: 28rpx;
			height: 28rpx;
		}

		&_info {
			height: 180rpx;
		}

		&_jt {
			width: 18rpx;
			height: 12rpx;
			margin-left: 12rpx;
		}

		&_js {
			width: 40rpx;
			height: 40rpx;
		}

		&_num {
			width: 90rpx;
			height: 40rpx;
			background: #f8f8f8;
			text-align: center;
			line-height: 40rpx;
			margin: 0 5rpx;
		}

		&_set {
			padding: 14rpx 20rpx 14rpx 67rpx;
		}

		.active {
			transform: rotate(180deg);
		}
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: #3f7233;
		border-radius: 10rpx;

		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 88rpx;
		text-align: center;
		margin: auto;
		margin-top: 20rpx;
	}

	.icon {
		width: 38rpx;
		height: 38rpx;

		&_text {

			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.iBten {
		width: 400rpx;
		height: 72rpx;
		background: #3F7233;
		border-radius: 10rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
	}
</style>